import React,{Component}from 'react';
import {Table,Tag,Space,Button,Row,Col,Modal,Form} from 'antd';
import {DeleteOutlined,EditOutlined} from '@ant-design/icons'
import styles from './index.less'
import moment from "moment";

export default class Index extends Component{
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            information:'',
            LogDetails:'',//日志详情
            pageIndex:1,
            pageSize:10,
            last:1,
        }
    }
    showModal=(record)=>{
        this.setState({
            visible:true,
            information:record
        })
    }
    componentDidUpdate(prevProps,prevState){
        console.log(prevProps)
        console.log(prevState)
        if(prevState.last!=this.state.last){  //这里判断请求新数据时，页面渲染两次导致table数据变化两次，为了页面展示效果，直接将第一次的渲染取消掉。
            return false
        }
        return true
    }
    render(){
        const {allLog,totalCount}=this.props
        const {information,pageIndex,pageSize,last} = this.state
        let log = new Array((last-1)*50);
        allLog.map((item,key)=>{
            log.push(item)
        })
        console.log(log)
        // console.log(allLog)
        const formItemLayout = {
            labelCol: {
              span: 4,
            },
        };
        const columns=[
            {
                title:'用户名',
                dataIndex:'userName',
                align:'center',
            }, 
            {
                title:'操作模块',
                dataIndex:'moduleName',
                align:'center',
            },
            {
                title:'设备类型',
                dataIndex:'deviceType',
                align:'center'
            },
            {
                title:'操作时间',
                dataIndex:'operationTime',
                align:'center',
                render: (text) => {
                    return moment(text).format("YYYY-MM-DD HH:mm");
                },
            },
            {
                title: '操作',
                dataIndex: 'Id',
                align: 'center',
                fixed: 'right',
                render: (text,record,index) => {
                    return <Button onClick={()=>{this.showModal(record)}} style={{ border: '1px solid #4caf50', color: '#4caf50' }} ghost >查看</Button>
            }},
        ]
        const pagination = {
            current: pageIndex, //当前页
            total: totalCount,
            pageSize: pageSize,
            showTotal:total=>`共 ${totalCount} 条数据`,
            onChange: this.onChange,
            onShowSizeChange: this.sizeChange
        }
        return(
           <Row className={styles._modal}>
               <Col span={24}>
                    <Table
                        columns={columns}
                        dataSource={log}
                        scroll={{ x: 500 }}
                        pagination={pagination}

                    />
               </Col>
               <Col span={24}>
               <Modal className={styles._div}
                    title="日志详细"
                    visible={this.state.visible}
                    onOk={() => this.setState({visible: false})}
                    onCancel={() => this.setState({visible: false})}
                    footer={null}
                    onClick={this.getLogById}
                >
                    <Form> 
                        <Form.Item {...formItemLayout} label="操作时间">
                        {moment(information.operationTime).format("YYYY-MM-DD HH:mm:ss")}
                        </Form.Item> 
                        <Form.Item {...formItemLayout} label="操作类型">
                            {information.operationType}
                        </Form.Item>
                        <Form.Item {...formItemLayout} label="模块名称">
                            {information.moduleName}
                        </Form.Item>
                        <Form.Item {...formItemLayout} label="操作描述">
                            {information.operationDescription}
                        </Form.Item>
                        <Form.Item {...formItemLayout} label="用户名">
                            {information.userName}
                        </Form.Item>
                        <Form.Item {...formItemLayout} label="用户IP">
                            {information.IP}
                        </Form.Item>
                        <Form.Item {...formItemLayout} label="设备类型">
                            {information.deviceType}
                        </Form.Item>
                    </Form>
                </Modal>
               </Col>
           </Row>
        );
    }
    onChange = (current, pageSize) => {
        let page=Math.ceil(current/5)
        console.log(this.state.last)
        if(page!=this.state.last){
            this.setState({
                last:page
            })
            this.props.handlePageChange(page, pageSize);
        }
        this.setState({
            pageIndex:current
        })
       
    };
    sizeChange=(current,size)=>{
        this.setState({
            pageSize:size
        })

    }
     
}

